<template>
	<view class="index">
		<!-- <view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="icon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view> -->
	
		<!-- #ifndef MP-ALIPAY -->
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item"  @click="goDetail(item.id)">
					<image :src="item.page_image" mode="aspectFill" ></image>
				</view>
			</swiper-item>
		</swiper>
		
	
		
		<view class="grid col-4 grid-square">
			<view class="padding-sm">
				<view class="bg-gradual-orange padding radius text-center shadow-blur">
					<navigator class="content" hover-class="none" url="../choice/choice" open-type="redirect">
						<view class="text-lg">币聪精选</view>
					</navigator>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-green padding radius text-center shadow-blur">
					<navigator class="content" hover-class="none" url="../choice/choice" open-type="redirect">
						<view class="text-lg">行情解析</view>
					</navigator>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-purple padding radius text-center shadow-blur">
					<navigator class="content" hover-class="none" url="../choice/choice" open-type="redirect">
						<view class="text-lg">焦点深度</view>
					</navigator>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-pink padding radius text-center shadow-blur">
					<navigator class="content" hover-class="none" url="../choice/choice" open-type="redirect">
						<view class="text-lg">小白百科</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="cu-card case" :class="true" v-for="(list, index) in lists" :key="index">
			<view class="cu-item shadow" v-for="(item,key) in list" :key="key" @click="goDetail(item.id)">
				<view class="image">
					<image :src="item.cover"
					 mode="widthFix"></image>
					<view class="cu-tag bg-blue" v-if="item.category_id === 1">精选</view>
					<view class="cu-tag bg-blue" v-else-if="item.category_id === 7">行情</view>
					<view class="cu-tag bg-blue" v-else-if="item.category_id === 6">百科</view>
					<view class="cu-tag bg-blue" v-else="item.category_id === 1">快讯</view>
					
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="content flex-sub">
							<view class="text-grey">{{item.author_name}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.created_at}}
								<view class="text-gray text-sm">
									<text class="icon-attentionfill margin-lr-xs"></text> {{item.view_count}}
									<!-- <text class="icon-appreciatefill margin-lr-xs"></text> {{item.comments_count}} -->
									<text class="icon-messagefill margin-lr-xs"></text> 0
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
		
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				pageSize:1,
				isLoad:false,
				refreshing: false,
				lists:[],
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			this.scrollList();
			// 初始化towerSwiper 传已有的数组名即可
		},
		onPullDownRefresh() {
			this.refreshing = true;
			this.TowerSwiper('swiperList');
		},
		onReachBottom() {
			this.TowerSwiper();
		},
		methods: {
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			scrollList(){
				uni.request({
				url: 'https://www.btxiaobai.com/xem/cdScroll',
				success: (data) => {
					if (data.statusCode == 200) {
						this.swiperList = data.data;
					}
				},
				fail: () => {
					console.log('fail');
				}
				})
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				uni.request({
					url: 'https://www.btxiaobai.com/xem/cdapp?columnId=1&minId=0&pageSize=' + this.pageSize,
					success: (ret) => {
						if (ret.statusCode !== 200) {
							console.log("请求失败", ret)
						} else {
							if (this.refreshing && ret.data.id === this.lists[0].id) {
								uni.showToast({
									title: "已经最新",
									icon: "none",
								})
								this.refreshing = false;
								uni.stopPullDownRefresh()
								return;
							}
							let list = [],
								lists = [],
								data = ret.data;
							for (let i = 0, length = data.length; i < length; i++) {
								let index = Math.floor(i / 2);
								list.push(data[i]);
								if (i % 2 == 1) {
									lists.push(list);
									list = [];
								}
							}
							// console.log(lists);
							// console.log("list页面得到lists", lists);
							if (this.refreshing) {
								this.refreshing = false;
								uni.stopPullDownRefresh()
								this.lists = lists;
								this.fetchPageNum = 2;
							} else {
								this.lists = this.lists.concat(lists);
								this.fetchPageNum += 1;
							}
							this.fetchPageNum += 1;
							this.pageSize++;
						}
					}
				});
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			goDetail(e) {
				uni.navigateTo({
					url: "../detail/detail?post_id=" + JSON.stringify(e)
				})
			},
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style>
	.index{
		margin-top: 50upx;
	}
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
